<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/masking.css">


</head>
<style>
    .first {
        width: 100%;
        height: 60px;
        border: 1px solid #F3F3F4;
        border-radius: 5px;
        line-height: 60px;
        background: #FFFFFF;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .first input, select {
        width: 120px;
        height: 20px;
        margin-right: 30px;
        border-radius: 5px;
        border: 1px solid #F3F3F4;
        background: #FFFFFF;
        outline: none;
        box-sizing: border-box;
    }

    .first button {
        width: 49px;
        height: 26px;
        border-radius: 20px;
        background: #00F7DE;
        color: #FFFFFF;
        border: none;
        opacity: 0.8;
    }

    button:hover {
        opacity: 1;
    }

    .second {
        width: 100%;
        height: 525px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #F3F3F4;
    }

    .second .secondTop {
        width: 100%;
        height: 30px;
    }

    .second .secondTop .secondTopLeft {
        float: left;
        width: 300px;
        height: 100%;
    }

    .second .secondTop .secondTopRight {
        float: right;
        width: 300px;
        height: 100%;
    }

    .second .secondTop .secondTopLeft ul {
        margin-left: -37px;
        box-sizing: border-box;
    }

    .second .secondTop .secondTopLeft ul li {
        float: left;
        list-style: none;
    }

    .second .secondTop .secondTopLeft ul li button {
        margin-right: 10px;
        border-radius: 5px;
        border: none;
        opacity: 0.8;
        height: 26px;
    }

    .tt {
        width: 100%;
        height: 20px;
    }

    .second .secondMiddle {
        width: 100%;
        height: 200px;
    }

    .fy {
        width: 100%;
        height: 40px;
        position: relative;
        padding-left: 600px;
        box-sizing: border-box;
    }

    .fy .fy-nav {
        height: 100%;
        position: absolute;
        top: -17px;
    }

    .second .secondMiddle .mainTable {
        width: 100%;
        height: 120px;
        overflow: hidden;
        clear: both;
    }

    .second .secondMiddle .mainTable thead tr {
        background: #EFF3F8;

    }

    .second .secondMiddle .mainTable thead tr th {
        border-bottom: 1px solid #CCCCCC;
    }

    .second .secondMiddle .mainTable td, th {
        border-bottom: 1px solid #F3F3F4;
        height: 25px;
        font-weight: normal;
        font-size: 13px;
        text-align: center;
    }
</style>
<body>
<div class="second" id="second">


    <div class="secondMiddle">
        食堂伙计
        <input type="button" value="添加" onclick="addCanteenMan()"/>
        <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>工号</th>
                <th>厨师名</th>
                <th>电话</th>
                <th>住址</th>
                <th>身份证</th>
                <th>入职日期</th>
                <th>薪水</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="canteenman in canteenMans">
                <td>{{canteenman.cid}}</td>
                <td>{{canteenman.cname}}</td>
                <td>{{canteenman.ctel}}</td>
                <td>{{canteenman.caddr}}</td>
                <td>{{canteenman.ccardid}}</td>
                <td>{{canteenman.centryday}}</td>
                <th>{{canteenman.csalary}}</th>
                <td>
                    <a href="#" onclick="updateCanteenMan(this)">修改</a>
                    <a href="#" onclick="delCanteenMan(this)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="fy">
            <ul class="pagination fy-nav" id="pagination1">

            </ul>

        </div>
    </div>
    <div class="secondMiddle">
        清洁<input type="button" value="添加" onclick="addAunt()"/>
        <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>地址</th>
                <th>身份证</th>
                <th>入职日期</th>
                <th>薪水</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="aunt in aunts">
                <td>{{aunt.aid}}</td>
                <td>{{aunt.aname}}</td>
                <td>{{aunt.atel}}</td>
                <td>{{aunt.aaddr}}</td>
                <td>{{aunt.acardid}}</td>
                <td>{{aunt.ahireday}}</td>
                <td>{{aunt.asalary}}</td>
                <td>
                    <a href="#" onclick="updateAunt(this)">修改</a>
                    <a href="#" onclick="delAunt(this)">删除</a>
                </td>
            </tr>

            </tbody>
        </table>
        <div class="fy">

            <ul class="pagination fy-nav" id="pagination2">

            </ul>

        </div>
    </div>

</div>
<div class="tts tts1">
    <form id="myform1" method="post">
        <table class="ttb">
            <tr>
                <td>
                    <div>
                        工号：<input type="text" name="cid" class="cid" readonly/>
                    </div>
                </td>
                <td>
                    <div>
                        厨师名：<input type="text" name="cname" class="cname"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        联系方式：<input type="text" name="ctel" class="ctel"/>
                    </div>
                </td>
                <td>
                    <div>
                        住址：<input type="text" name="caddr" class="caddr"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        身份证：<input type="text" name="ccardid" class="ccardid"/>
                    </div>
                </td>
                <td>
                    <div>
                        入职日期：<input type="date" name="centryday" class="centryday"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        薪水：<input type="text" name="csalary" class="csalary"/>
                    </div>
                </td>
                <td>
                    <div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="提交" class="btn3"/>
                    <input type="button" value="修改" class="btn4"/>
                </td>
                <td><input type="button" value="取消" onclick="cancelData()"/></td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
<div class="tts tts2">
    <form id="myform2" method="post">
        <table class="ttb">
            <tr>
                <td>
                    <div>
                        阿姨编号：<input type="text" name="aid" class="aid" readonly/>
                    </div>
                </td>
                <td>
                    <div>
                        阿姨名字：<input type="text" name="aname" class="aname"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        联系方式：<input type="text" name="atel" class="atel"/>
                    </div>
                </td>
                <td>
                    <div>
                        住址：<input type="text" name="aaddr" class="aaddr"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        身份证：<input type="text" name="acardid" class="acardid"/>
                    </div>
                </td>
                <td>
                    <div>
                        入职日期：<input type="date" name="ahireday" class="ahireday"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        薪水：<input type="text" name="asalary" class="asalary"/>
                    </div>
                </td>
                <td>
                    <div>
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" value="提交" class="btn5"/>
                    <input type="button" value="修改" class="btn6"/>
                </td>
                <td><input type="button" value="取消" onclick="cancelData()"/></td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
<div class="mask"></div>
</body>
<script src="js/JQuery2.1.4.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script src="layui/layui.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/hq.js"></script>
<script>
    $(".mainTable tbody>tr").mouseout(function () {
        $(this).css("background", "#FFFFFF")
    })
    $(".mainTable tbody>tr").mouseover(function () {
        $(this).css("background", "#EFF3F8")
    })
</script>
</html>